﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="angular.1.2.2.js"></script>
    <script src="angular-route.1.2.2.js"></script>
    <script src="angular-sanitize.1.2.2.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="mheader">
        <a href="#/page2/3">Page2</a>
    </div>
    <div ng-view></div>
    <div>Footer</div>
</body>
</html>
<script>
    var m = angular.module("app", ["ngRoute"]);
    //http://stackoverflow.com/questions/11534710/angularjs-how-to-use-routeparams-in-generating-the-templateurl
    m.config(["$routeProvider", function ($routeProvider) {
        $routeProvider.when("/", {
            controller: "mcpage1",
            templateUrl: "Page-1.html"
        }).when("/page2/:id", {
            controller: "mcpage2",
            templateUrl: "Page-2.html"
        }).otherwise({ redirectTo: '/' });
    }]);
    //http://www.ssss.com/page2/3
    m.controller("mheader", function ($scope, $rootScope) {

    })

    m.controller("mcpage1", function ($scope, $rootScope) {
        $scope.hello = "Hello World--1";

        $scope.subHello = "subHello 1.1";
    })

    function Greeter(salutation) {
        this.greet = function (name) {
            return salutation + " " + name;
        }
    }

    m.factory("greeter", function () {
        return Greeter;
    })

    m.controller("mcpage2", function ($scope, $rootScope, greeter, $routeParams) {

        $scope.hello = "Hello World--2";
        //alert($routeParams.id);

        var myGreeter = new greeter("halo");
        var name = myGreeter.greet("nienie");
        alert(name);
    })


</script>
